<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="顺丰.css">
</head>

<body>
    <div class="box">
        <div class="box1">
            <div class=""><img src="./imgs/1.png" alt="" height="60px"></div>
            <div class="dh1">首页</div>
            <div class="dh1">物流服务</div>
            <div class="dh1">智慧科技</div>
            <div class="dh1">服务支持</div>
            <div class="dh1">可持续发展</div>
            <div class="dh1">投资者关系</div>
            <div class="dh1">关于我们</div>
            <div class="box2"><i class="glyphicon glyphicon-user"></i>&ensp;<span>快速登录/注册</span>
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2F57%2F89%2FQJ6237586840.jpg&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648119296&t=b07c038c45e506ee22f251bab094567d"
                    width="20px" alt="">
            </div>
        </div>
        <div class="box3">
            <img src="./imgs/2.jpg" width="1200px" alt="">
        </div>
        <div class="box4">
            <div class="dh2"><i class="glyphicon glyphicon-search"></i>&nbsp;运单追踪</div><span>|</span>
            <div class="dh2"><i class="glyphicon glyphicon-minus-sign"></i>&nbsp;我要寄件</div><span>|</span>
            <div class="dh2"><i class="glyphicon glyphicon-jpy"></i>&nbsp;运费时效查询</div><span>|</span>
            <div class="dh2"><i class="glyphicon glyphicon-map-marker"></i>&nbsp;服务网点想查询</div><span>|</span>
            <div class="dh2"><i class="glyphicon glyphicon-globe"></i>&nbsp;收寄范围查询</div>
        </div>
        <div class="nav">
            <div class="box5">
                <h1>物流服务介绍</h1>
            </div>
            <div class="box6">
                <div class="box7">
                    <div class="dh3">快递服务</div>
                    <div class="dh3">快运服务</div>
                    <div class="dh3">冷运服务</div>
                    <div class="dh3">医药服务</div>
                    <div class="dh3">国际服务</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $('.dh3').click(function(){
        $('.dh3').css({color:'',borderBottom:''})
        $(this).css({color:'red',borderBottom:'4px solid rgb(168, 0, 0)'})
    })
    $('.dh2').mouseover(function () {
        $(this).css({ color: 'red', background: '#fff' })
    })
    $('.dh2').mouseout(function () {
        $(this).css({ color: '#fff', background: 'rgb(173, 0, 0)' })
    })
    $('.dh1').mouseover(function () {
        $(this).css({ color: 'red', borderBottom: '3px solid red' })
    })
    $('.dh1').mouseout(function () {
        $(this).css({ color: '', borderBottom: '' })
    })
    $('.box2 span').mouseover(function () {
        $(this).css({ color: 'red' })
    })
    $('.box2 span').mouseout(function () {
        $(this).css({ color: '' })
    })
</script>

</html>